<template>
  <u-navbar auto-back :title="getTitle()" bgColor="#fff"></u-navbar>
  <view class="">
    <view class="con">
      <u-form labelPosition="left" :model="formData" label-width="88" :rules="rules" ref="form">
        <view class="commonBox" v-if="pageType === '1'">
          <u-form-item label="学校名称" prop="name" borderBottom>
            <u-input v-model="formData.name" border="none" placeholder="请输入"> </u-input>
          </u-form-item>
        </view>
        <view class="commonBox" v-if="pageType === '2'">
          <u-form-item label="公司名称" prop="name" borderBottom>
            <u-input v-model="formData.name" border="none" placeholder="请输入"> </u-input>
          </u-form-item>
        </view>
        <view class="commonBox">
          <u-form-item label="" prop="startDate" borderBottom>
            <view class="dateBox">
              开始时间
              <text @click="openPicker" :style="{ color: formData.startDate ? '#000' : '#cbcccc' }">{{ formData.startDate ? formData.startDate : "请选择" }}</text>
              <text class="hx">-</text>
              结束时间
              <text @click="openPicker" :style="{ color: formData.endDate ? '#000' : '#cbcccc' }">{{ formData.endDate ? formData.endDate : "请选择" }}</text>
            </view>
          </u-form-item>

          <sofar-picker :visable.sync="pickerVisable" :defaultDate="defaultDate" @confirm="confirm"></sofar-picker>
        </view>
        <view class="commonBox" v-if="pageType === '1'">
          <u-form-item label="专业" prop="major" borderBottom labelStyle="display:block">
            <u-input v-model="formData.major" border="none" placeholder="请输入"> </u-input>
          </u-form-item>
        </view>
        <view class="commonBox" v-if="pageType === '1'">
          <u-form-item label="学历" prop="education" borderBottom>
            <u-input v-model="formData.education" border="none" placeholder="请输入"> </u-input>
          </u-form-item>
        </view>
        <view class="commonBox" v-if="pageType === '2'">
          <u-form-item label="职务" prop="job" borderBottom>
            <u-input v-model="formData.job" border="none" placeholder="请输入"> </u-input>
          </u-form-item>
        </view>
        <view class="commonBox">
          <u-form-item label="说明" prop="introduction" borderBottom>
            <u-input v-model="formData.introduction" border="none" placeholder="请输入"> </u-input>
          </u-form-item>
        </view>
      </u-form>
      <view class="buttomBox">
        <u-button @click="submit" shape="circle" text="立即提交" color="#1676fd"></u-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
//@ts-ignore
import sofarPicker from "@/components/sofar-picker.vue";
import { onBeforeMount, onMounted, ref } from "vue";
import { useBCardStore } from "@/stores/bCard";
const { pageType, opType } = defineProps<{
  pageType: string;
  opType: string;
}>();
const getTitle = () => {
  if (pageType === "1") {
    return opType === "add" ? "学历新增" : opType === "edit" ? "学历修改" : "";
  } else if (pageType === "2") {
    return opType === "add" ? "工作新增" : opType === "edit" ? "工作修改" : "";
  } else {
    return "修改";
  }
};
const form = ref();
const pickerVisable = ref(false);
const defaultDate = ref<any[]>([]);
const formData = ref<any>({
  name: "",
  startDate: "",
  endDate: "",
  job: "",
  introduction: "",
  education: "",
  major: "",
});
if (opType !== "add") {
  formData.value = useBCardStore().editEduWorkInfo;
  defaultDate.value = [formData.value.startDate, formData.value.endDate];
}

const rules = ref({
  name: {
    type: "string",
    required: true,
    message: "请填写",
    trigger: ["change", "blur"],
  },
  major: {
    type: "string",
    required: true,
    message: "请填写专业",
    trigger: ["change", "blur"],
  },
  education: {
    type: "string",
    required: true,
    message: "请填写学历",
    trigger: ["change", "blur"],
  },
  startDate: {
    type: "string",
    required: true,
    message: "请填写开始时间与结束时间",
    trigger: ["change", "blur"],
  },
});
const openPicker = () => {
  pickerVisable.value = true;
};
const confirm = (date: string[]) => {
  pickerVisable.value = false;
  formData.value.startDate = date[0];
  formData.value.endDate = date[1];
  form.value.validateField("startDate");
};
const submit = () => {
  form.value.validate().then(async () => {
    if (opType === "edit") {
      let obj: any = useBCardStore().editCardInfo;
      if (pageType === "1") {
        let newArray = obj.learnList.map((item: any) => (item.id === formData.value.id ? formData.value : item));
        obj.learnList = newArray;
      } else if (pageType === "2") {
        let newArray = obj.workList.map((item: any) => (item.id === formData.value.id ? formData.value : item));
        obj.workList = newArray;
      }
      useBCardStore().setEditCardInfo(obj);
      uni.showToast({
        title: "修改成功",
        icon: "success",
        complete() {
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        },
      });
    } else {
      let obj: any = useBCardStore().editCardInfo;
      if (pageType === "1") {
        obj?.learnList.push(formData.value);
      } else if (pageType === "2") {
        obj?.workList.push(formData.value);
      }
      useBCardStore().setEditCardInfo(obj);
      uni.showToast({
        title: "添加成功",
        icon: "success",
        complete() {
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        },
      });
    }
  });
};
</script>

<style lang="less" scoped>
.commonBox {
  padding-top: 0rpx;
  padding-bottom: 0rpx;
}
.con {
  padding-bottom: 120rpx;
  margin-top: 20rpx;
  padding-top: 180rpx;
}
/deep/.u-input {
  padding: 14rpx 0px !important;
}
/deep/ .u-line {
  border-color: #f7f7f7 !important;
}
/deep/ .u-border-bottom {
  border-color: #f7f7f7 !important;
}
/deep/ .u-cell__body {
  padding: 16rpx 0 !important;
}
/deep/ .u-form-item__body {
  flex-direction: column !important;
}
.dateBox {
  padding: 36rpx 0;
  font-size: 30rpx;
  color: #1e1e1e;
  line-height: 42rpx;
  text {
    margin: 0 24rpx;
    font-size: 30rpx;
    line-height: 42rpx;
  }
  .hx {
    color: #1e1e1e;
  }
}
/deep/ .u-form-item__body__right__message {
  margin-left: 0 !important;
}
</style>
